'use client';

import { useState } from 'react';
import FloatingBackButton from './FloatingBackButton';
import { HomeOutlined, ArrowUpOutlined, StarOutlined } from '@ant-design/icons';

export default function FloatingBackButtonDemo() {
  const [showOnDesktop, setShowOnDesktop] = useState(false);
  const [position, setPosition] = useState<'left' | 'right'>('right');
  const [size, setSize] = useState(48);
  const [backgroundColor, setBackgroundColor] = useState('#1890ff');

  return (
    <div className="p-6 space-y-8">
      <h1 className="text-3xl font-bold text-center mb-8">
        FloatingBackButton 演示
      </h1>

      {/* 控制面板 */}
      <div className="bg-gray-50 p-4 rounded-lg space-y-4">
        <h2 className="text-xl font-semibold">控制选项</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium mb-2">
              显示在桌面端
            </label>
            <input
              type="checkbox"
              checked={showOnDesktop}
              onChange={(e) => setShowOnDesktop(e.target.checked)}
              className="mr-2"
            />
            <span className="text-sm text-gray-600">
              {showOnDesktop ? '是' : '否'}
            </span>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              位置
            </label>
            <select
              value={position}
              onChange={(e) => setPosition(e.target.value as 'left' | 'right')}
              className="border rounded px-2 py-1"
            >
              <option value="right">右侧</option>
              <option value="left">左侧</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              大小: {size}px
            </label>
            <input
              type="range"
              min="32"
              max="80"
              value={size}
              onChange={(e) => setSize(Number(e.target.value))}
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              背景色
            </label>
            <input
              type="color"
              value={backgroundColor}
              onChange={(e) => setBackgroundColor(e.target.value)}
              className="w-full h-10 border rounded"
            />
          </div>
        </div>
      </div>

      {/* 基本用法 */}
      <div className="border rounded-lg p-4">
        <h2 className="text-xl font-semibold mb-4">基本用法</h2>
        <p className="text-gray-600 mb-4">
          默认配置的悬浮返回按钮，只在移动端显示
        </p>
        <FloatingBackButton />
      </div>

      {/* 自定义样式 */}
      <div className="border rounded-lg p-4">
        <h2 className="text-xl font-semibold mb-4">自定义样式</h2>
        <p className="text-gray-600 mb-4">
          根据控制面板的选项动态调整样式
        </p>
        <FloatingBackButton
          size={size}
          backgroundColor={backgroundColor}
          position={position}
          showOnDesktop={showOnDesktop}
        />
      </div>

      {/* 不同位置 */}
      <div className="border rounded-lg p-4">
        <h2 className="text-xl font-semibold mb-4">不同位置</h2>
        <p className="text-gray-600 mb-4">
          左侧和右侧的按钮示例
        </p>
        <FloatingBackButton
          position="left"
          backgroundColor="#ff4d4f"
          showOnDesktop={true}
        />
        <FloatingBackButton
          position="right"
          backgroundColor="#52c41a"
          showOnDesktop={true}
        />
      </div>

      {/* 自定义图标 */}
      <div className="border rounded-lg p-4">
        <h2 className="text-xl font-semibold mb-4">自定义图标</h2>
        <p className="text-gray-600 mb-4">
          使用不同的图标和颜色
        </p>
        <FloatingBackButton
          customIcon={<HomeOutlined />}
          backgroundColor="#722ed1"
          showOnDesktop={true}
        />
        <FloatingBackButton
          customIcon={<ArrowUpOutlined />}
          backgroundColor="#fa8c16"
          position="left"
          showOnDesktop={true}
        />
        <FloatingBackButton
          customIcon={<StarOutlined />}
          backgroundColor="#eb2f96"
          position="right"
          topOffset={-80}
          showOnDesktop={true}
        />
      </div>

      {/* 说明 */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 className="text-lg font-semibold text-blue-800 mb-2">使用说明</h3>
        <ul className="text-blue-700 space-y-1 text-sm">
          <li>• 在移动端（≤768px）时，按钮会自动显示</li>
          <li>• 勾选"显示在桌面端"可以在桌面端也看到按钮</li>
          <li>• 调整控制选项可以实时预览效果</li>
          <li>• 点击按钮会返回上一页，如果没有历史记录则跳转首页</li>
        </ul>
      </div>
    </div>
  );
}
